<template>
  <div>
    <div class="bd">
      <div class="cesaun_container">
        <h3 class="title">
          <p class="line">正缘画像</p>
        </h3>
        <div>
          <div>
            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              label-width="120px"
              label-position="right"
            >
              <!-- 姓名 -->
              <el-form-item label="姓名：" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入姓名"
                  clearable
                  style="width: 450px"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 生日 -->
              <el-form-item label="生日：" prop="birthday">
                <el-date-picker
                  v-model="birthday"
                  @change="dateBir"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 450px"
                ></el-date-picker>
              </el-form-item>

              <!-- 历法选择 -->
              <el-form-item label="历法：" prop="type">
                <el-radio-group v-model="form.type">
                  <el-radio label="1">阳历</el-radio>
                  <el-radio label="0">农历</el-radio>
                </el-radio-group>
              </el-form-item>

              <!-- 太阳时 -->
              <el-form-item label="太阳时：" prop="zhen">
                <el-radio-group v-model="form.zhen">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="流派" prop="sect">
                <el-radio-group v-model="form.sect">
                  <el-radio label="1">晚子时日柱算明天</el-radio>
                  <el-radio label="2">晚子时日柱算当天</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 出生地区 -->
              <el-form-item
                label="出生地区："
                v-if="form.zhen == 1"
                prop="csdq"
              >
                <v-distpicker
                  @selected="onSelected"
                  :province="form.province"
                  :city="form.city"
                  :area="area"
                ></v-distpicker>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="submitForm" style="margin: 20px"
            >立即测算</el-button
          >
        </div>

        <!-- 主体表单 -->
      </div>
      <div>
        <h3 class="title">
          <p class="line">测算简介</p>
        </h3>
        <div style="font-size: 14px; margin: 0 10px 20px 10px">
          <p style="">
            1.缘份居正缘画像通过八字查询正缘信息，测算结果仅供参考。
          </p>
          <p>
            2.八字，即生辰八字，是一个人出生时的干支历日期。年干和年支组成年柱，月干和月支组成月柱，日干和日支组成日柱，时干和时支组成时柱，一共四柱，四个干和四个支共八个字，故又称四柱八字。是算命方法之中最正统的一种。
          </p>
          <p>
            3.中国古代一个时辰等于现在的两个小时，比如午时，即现代时间的11时到13时之间。八字算命只需准确到时辰范围（两个小时之间）即可，不必精确到分钟。
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      title="测算结果"
      :visible.sync="centerDialogVisible"
      width="50%"
      class="dialog_cesuan"
    >
      <div class="bazi_info" v-if="data != null">
        <div class="base_info">
          <div class="show">
            <span class="l">缘主姓名:</span>
            <span class="r">{{ data.base_info.name }}</span>
          </div>
          <div class="show">
            <span class="l">出生公历:</span>
            <span class="r">{{ data.base_info.gongli }}</span>
          </div>
        </div>

        <div class="base_info">
          <div class="details">
            <div class="names">
              <span>真爱画像（五官分析）：</span>
            </div>
            <div class="des">
              <p>
                <span class="des_deta"
                  >脸型：{{ data.zhengyuan_info.huaxiang.face_shape }}</span
                >
              </p>
              <p>
                <span class="des_deta"
                  >眉型：{{ data.zhengyuan_info.huaxiang.eyebrow_shape }}</span
                >
              </p>
              <p>
                <span class="des_deta"
                  >眼型：{{ data.zhengyuan_info.huaxiang.eye_shape }}</span
                >
              </p>

              <p>
                <span class="des_deta"
                  >嘴型：{{ data.zhengyuan_info.huaxiang.mouth_shape }}</span
                >
              </p>
              <p>
                <span class="des_deta"
                  >鼻型：{{ data.zhengyuan_info.huaxiang.nose_shape }}</span
                >
              </p>
              <p>
                <span class="des_deta"
                  >体型：{{ data.zhengyuan_info.huaxiang.body_shape }}</span
                >
              </p>
              <p>
                <span class="des_deta">画像：</span>
                <img
                  :src="data.zhengyuan_info.huaxiang.profile_image"
                  alt=""
                  style="width: 200px; height: 200px"
                />
              </p>
            </div>
          </div>

          <div class="details">
            <div class="names">
              <span>真爱特质：</span>
            </div>
            <div class="des">
              <p>
                <span class="des_span"> 恋爱性格： </span>
                <span class="des_deta">{{
                  data.zhengyuan_info.tezhi.romantic_personality
                }}</span>
              </p>
              <p>
                <span class="des_span"> 事业财富： </span>
                <span class="des_deta">{{
                  data.zhengyuan_info.tezhi.career_wealth
                }}</span>
              </p>
              <p>
                <span class="des_span"> 家庭背景： </span>
                <span class="des_deta">{{
                  data.zhengyuan_info.tezhi.family_background
                }}</span>
              </p>

              <p>
                <span class="des_span"> 家庭背景： </span>
                <span class="des_deta">{{
                  data.zhengyuan_info.tezhi.marital_happiness
                }}</span>
              </p>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>真爱指引：</span>
            </div>
            <div class="des">
              <p>
                <span class="des_span"> 真爱方位： </span>
                <span class="des_deta">{{
                  data.zhengyuan_info.zhiyin.love_location
                }}</span>
              </p>
              <p>
                <span class="des_span"> 结识方式： </span>
                <span class="des_deta">{{
                  data.zhengyuan_info.zhiyin.meeting_method
                }}</span>
              </p>
              <p>
                <span class="des_span"> 相处模式： </span>
                <span class="des_deta">{{
                  data.zhengyuan_info.zhiyin.interaction_model
                }}</span>
              </p>

              <p>
                <span class="des_span"> 真爱告诫： </span>
                <span class="des_deta">{{
                  data.zhengyuan_info.zhiyin.love_advice
                }}</span>
              </p>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>真爱运势：</span>
            </div>
            <div class="des">
              <p>
                <span class="des_span"> 感情运势： </span>
                <span class="des_deta">{{ data.zhengyuan_info.yunshi }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="yl">
          <span>仅供娱乐！请勿当真</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";

export default {
  components: {
    VDistpicker,
  },
  data() {
    return {
      ff: {},
      data: null,
      value: "",
      centerDialogVisible: false,
      area: "",
      birthday: "",
      form: {
        name: "",
        sect: "2",
        type: "1",

        zhen: "1",

        sex: "男",
        year: "",
        month: "",
        day: "",
        province: "",
        city: "",
        hours: "",
        minute: "",
      },

      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],

        type: [
          { required: true, message: "请选择历法类型", trigger: "change" },
        ],
        zhen: [
          {
            required: true,
            message: "请选择是否使用太阳时",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    let formBz = JSON.parse(localStorage.getItem("arrangeEightFormStorage"));
    console.log(formBz);
    if (formBz) {
      this.form.name = formBz.name;
      this.form.sex = formBz.sex == 0 ? "男" : "女";
      this.form.type = formBz.isLunar == 0 ? "1" : "0";

      this.form.year = formBz.year;
      this.form.month = formBz.month;
      this.form.day = formBz.day;
      this.form.hours = this.padZero(formBz.hours);
      this.form.minute = this.padZero(formBz.minute);
      this.birthday =
        this.form.year +
        "-" +
        this.form.month +
        "-" +
        this.form.day +
        " " +
        this.form.hours +
        ":" +
        this.form.minute +
        ":00";

      this.form.province = formBz.province;
      this.form.city = formBz.city + "市";
      // this.area = formBz.area;
      console.log(this.form);
    }
  },
  methods: {
    padZero(num) {
      return num.toString().padStart(2, "0");
    },
    dateBir(val) {
      console.log(val);
      this.birthday = val;

      var date = new Date(val);

      // 获取各部分时间
      var year = date.getFullYear(); // 年（4位）
      var month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月（补零）
      var day = date.getDate().toString().padStart(2, "0"); // 日（补零）
      var hours = date.getHours().toString().padStart(2, "0"); // 时（补零）
      var minutes = date.getMinutes().toString().padStart(2, "0"); // 分（补零）

      this.form.year = year;
      this.form.month = month;
      this.form.day = day;
      this.form.hours = hours;
      this.form.minute = minutes;
    },
    onSelected(val) {
      console.log(val);
      this.form.province = val.province.value;
      this.form.city = val.city.value;
      this.area = val.area.value;
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 这里处理提交逻辑
          if (!this.birthday) {
            this.$message.error("请选择生日");
            return false;
          }
          if (this.form.zhen == 1) {
            if (!this.form.province) {
              this.$message.error("请选择出生地区");
              return false;
            }
            if (!this.form.city) {
              this.$message.error("请选择出生地区");
              return false;
            }
            if (!this.area) {
              this.$message.error("请选择出生地区");
              return false;
            }
          }

          this.form["api_key"] = "FNcQHQuf0W8wDrXMjWc0xqTzw";
          let config = {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          };
          this.form.city = this.form.city.replace("市", "");
          this.$axios
            .post(
              window.config.apiUrl + "/v1/Yuce/zhengyuan",
              this.form,
              config
            )
            .then((res) => {
              if (res.data.errcode == -1) {
                this.$message({
                  type: "warning",
                  message: res.data.errmsg,
                });

                return;
              }

              this.centerDialogVisible = true;
              this.data = res.data.data;
              console.log(this.result);
            });
        } else {
          this.$message.error("请完善表单信息");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.ln {
  font-weight: 800;
}
@mixin flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  height: 45px;
}

@mixin tr1_w {
  width: 33px;
  span-align: center;
}

span {
  user-select: all;
}

.bazi_info {
  .base_info {
    margin: 20px;

    .title {
      display: flex;
      padding: 10rpx;

      .shu {
        width: 5px;
        height: 20px;
        background-color: #e6a84b;
        border-radius: 10px;
      }

      .ti {
        padding-left: 6px;
        font-weight: 800;
        font-size: 15px;
      }
    }

    .show {
      margin-top: 15px;

      .l_ {
        font-size: 14px;
        display: inline-block;
        min-width: 50px;
        font-weight: 800;
      }

      .l {
        font-size: 15px;
        display: inline-block;
        min-width: 80px;
        font-weight: 800;
      }
    }

    .details {
      border: 1px solid #e5e5e5;
      border-bottom: none;
      margin-top: 20px;

      .names {
        span-align: center;

        border-bottom: 1px solid #e5e5e5;
        color: #000;
        font-weight: 800;
        background-color: #fff3ef;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
      }

      .des {
        border-bottom: 1px solid #e5e5e5;
        padding-left: 10px;
        display: flex;
        flex-direction: column;

        p {
          margin-top: 15px;
        }
        .des_span {
          color: red;
          width: 14%;
          font-weight: 800;
          user-select: span;
        }

        .des_deta {
          width: 85%;
          line-height: 26px;

          user-select: span;
        }
      }

      .dayun_title {
        color: red;
        font-size: 15px;
      }

      .dayunone {
        margin-top: 8px;
        padding: 8px;
      }
    }
  }
}
</style>